<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智障问诊 - 良心有限医疗</title>

    <!-- Tailwind CSS（CDN引入） -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome（图标） -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Inter字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Tailwind 主题配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',   // 主色
                        secondary: '#36CFC9', // 辅助色
                        neutral: '#F2F3F5',   // 浅灰背景
                        dark: '#1D2129',      // 深色文字
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类（滚动隐藏、打字动画） -->
    <style type="text/tailwindcss">
        @layer utilities {
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .typing-indicator::after {
                content: "...";
                animation: typing 1.5s infinite;
                display: inline-block;
                width: 0;
            }
            @keyframes typing {
                0% { content: "."; }
                33% { content: ".."; }
                66% { content: "..."; }
            }
        }
    </style>

    <!-- 基础字体设置 -->
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
    </style>
</head>

<body class="font-inter bg-gray-50 text-dark">
<!-- 顶部导航栏（固定+毛玻璃） -->
<header id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-sm shadow-sm">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            <!-- 品牌区域 -->
            <div class="flex items-center">
                <a href="#" class="flex items-center">
                    <div class="w-8 h-8 flex items-center justify-center bg-primary text-white rounded-full mr-2">
                        <i class="fa fa-heartbeat text-base"></i>
                    </div>
                    <span class="text-xl font-bold text-primary">良心有限医疗</span>
                </a>
                <!-- 导航菜单（竖排文字，MD及以上显示） -->
                <nav class="hidden md:ml-10 md:flex space-x-8">
                    <a href="/moxiang/homef" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors whitespace-pre">首<br>页</a>
                    <a href="/moxiang/departments" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors whitespace-pre">科室<br>导航</a>
                    <a href="/moxiang/doctors" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors whitespace-pre">医生<br>团队</a>
                    <a href="/moxiang/appointment" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors whitespace-pre">预约<br>挂号</a>
                    <a href="/moxiang/about" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors whitespace-pre">关于<br>我们</a>
                </nav>
            </div>
            <!-- 移动端菜单按钮（MD以下显示） -->
            <div class="flex items-center md:hidden">
                <button id="mobileMenuBtn" class="text-gray-700 hover:text-primary focus:outline-none">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </div>
</header>

<!-- 主内容区域（补偿导航栏高度） -->
<main class="pt-24 pb-16">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 标题区域 -->
        <div class="text-center mb-12">
            <h1 class="text-3xl md:text-4xl font-bold text-dark mb-4">
                <span class="text-primary">AI 智障问诊</span> - 24小时在线解答
            </h1>
            <p class="text-gray-600 max-w-2xl mx-auto">
                我们的AI医生基于最新医疗知识库，可提供初步健康咨询和建议。<br>
                请注意，AI建议仅供参考，不能替代专业医生诊断。
            </p>
        </div>

        <!-- AI问诊聊天区域 -->
        <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
            <!-- 聊天头部 -->
            <div class="bg-primary text-white px-6 py-4 flex items-center">
                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-3">
                    <i class="fa fa-robot text-xl"></i>
                </div>
                <div>
                    <h3 class="font-medium">AI 医疗助手</h3>
                    <p class="text-xs opacity-80">在线 · 基于豆包AI大模型</p>
                </div>
                <div class="ml-auto">
                    <button id="resetChatBtn" class="p-2 rounded-full hover:bg-white/10 transition-colors">
                        <i class="fa fa-refresh text-white text-sm"></i>
                    </button>
                </div>
            </div>

            <!-- 聊天内容区域（动态渲染消息） -->
            <div id="chatContainer" class="h-96 overflow-y-auto p-4 bg-gray-50 scrollbar-hide space-y-4"></div>

            <!-- 输入区域 -->
            <div class="border-t border-gray-200 p-4 bg-white">
                <form id="chatForm" class="flex items-center">
                    <div class="flex-1 relative">
                        <input
                                id="userInput"
                                type="text"
                                placeholder="描述您的症状或问题..."
                                class="w-full pl-4 pr-12 py-3 border border-gray-300 rounded-full focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
                                autocomplete="off">

                    </div>
                    <button type="submit" class="ml-3 w-12 h-12 rounded-full bg-primary text-white hover:bg-primary/90 transition-colors flex items-center justify-center">
                        <i class="fa fa-paper-plane text-sm"></i>
                    </button>
                </form>
                <!-- 快捷问题按钮 -->
                <div class="mt-2 flex flex-wrap gap-2 text-xs">
                    <button class="quick-question-btn px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full transition-colors">感冒了怎么办？</button>
                    <button class="quick-question-btn px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full transition-colors">头痛可能是什么原因？</button>
                    <button class="quick-question-btn px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full transition-colors">如何缓解胃痛？</button>
                    <button class="quick-question-btn px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full transition-colors">高血压饮食建议</button>
                </div>
            </div>
        </div>

        <!-- 免责声明 -->
        <div class="mt-6 p-4 bg-white rounded-lg shadow-sm max-w-4xl mx-auto">
            <div class="flex items-start">
                <div class="text-yellow-500 mr-2 mt-1">
                    <i class="fa fa-exclamation-triangle"></i>
                </div>
                <div>
                    <h4 class="font-medium text-sm text-gray-800">免责声明</h4>
                    <p class="text-xs text-gray-600 mt-1">
                        AI医疗助手提供的建议仅供参考，不能替代专业医生的诊断和治疗。如有紧急情况或严重症状，请立即就医。平台不对AI提供的信息准确性做任何保证。
                    </p>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 交互逻辑 -->
<script>
    // 1. 响应式数据模拟
    let userInput = "";
    let chatMessages = [];

    // 2. 初始化聊天（模拟Vue的onMounted）
    function initChat() {
        chatMessages = [
            {
                sender: "ai",
                content: "您好！我是AI医疗助手，可以为您提供健康咨询和医疗建议。请问您有什么不适症状或健康问题需要咨询？\n\n你不仅可以问医疗，其他任何问题都可以问 温馨提示：AI回答仅供参考，具体诊断请以医生为准。",
                isTyping: false,
            },
        ];
        renderChatMessages();
    }

    // 3. 渲染聊天消息到DOM（模拟Vue的v-for）
    function renderChatMessages() {
        const chatContainer = document.getElementById("chatContainer");
        chatContainer.innerHTML = ""; // 清空旧内容

        chatMessages.forEach((message) => {
            const messageDiv = document.createElement("div");
            messageDiv.className = `flex ${
                message.sender === "user" ? "justify-end" : ""
            } mb-4`;

            // AI头像
            if (message.sender === "ai") {
                const avatar = document.createElement("div");
                avatar.className =
                    "w-8 h-8 rounded-full bg-secondary text-white flex items-center justify-center mr-3 flex-shrink-0";
                avatar.innerHTML = '<i class="fa fa-robot text-sm"></i>';
                messageDiv.appendChild(avatar);
            }

            // 消息气泡
            const bubble = document.createElement("div");
            bubble.className = `${
                message.sender === "user"
                    ? "bg-primary text-white p-3 rounded-lg shadow max-w-[80%]"
                    : "bg-white text-gray-800 p-3 rounded-lg shadow max-w-[80%]"
            }`;
            if (message.isTyping) {
                bubble.innerHTML = '<p class="typing-indicator"></p>';
            } else {
                bubble.textContent = message.content;
            }
            messageDiv.appendChild(bubble);

            // 用户头像
            if (message.sender === "user") {
                const avatar = document.createElement("div");
                avatar.className =
                    "w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center ml-3 flex-shrink-0";
                avatar.innerHTML = '<i class="fa fa-user text-sm"></i>';
                messageDiv.appendChild(avatar);
            }

            chatContainer.appendChild(messageDiv);
        });

        // 滚动到底部
        scrollToBottom();
    }


    // 5. 快捷提问（模拟Vue的quickQuestion）
    function quickQuestion(question) {
        const input = document.getElementById("userInput");
        input.value = question;
        sendMessage();
    }

    // 6. 重置聊天（模拟Vue的resetChat）
    function resetChat() {
        initChat();
    }

    // 7. 滚动到底部（工具函数）
    function scrollToBottom() {
        const container = document.getElementById("chatContainer");
        container && (container.scrollTop = container.scrollHeight);
    }

    // 8. 导航栏滚动效果
    window.addEventListener("scroll", () => {
        const navbar = document.getElementById("navbar");
        if (window.scrollY > 10) {
            navbar.classList.add("shadow-md");
            navbar.classList.remove("shadow-sm");
        } else {
            navbar.classList.remove("shadow-md");
            navbar.classList.add("shadow-sm");
        }
    });

    // 9. 事件绑定（页面加载后初始化）
    document.addEventListener("DOMContentLoaded", () => {
        initChat();

        // 表单提交
        const chatForm = document.getElementById("chatForm");
        chatForm.addEventListener("submit", (e) => {
            e.preventDefault(); // 阻止默认提交
            sendMessage();// 自定义数据处理
        });

        // 发送消息（模拟Vue的sendMessage）
        async function sendMessage() {
            const input = document.getElementById("userInput");
            const message = input.value.trim();
            if (!message) return;

            // 添加用户消息
            chatMessages.push({
                sender: "user",
                content: message,
                isTyping: false,
            });
            input.value = "";
            renderChatMessages();

            // 模拟加载状态
            chatMessages.push({
                sender: "ai",
                content: "",
                isTyping: true,
            });
            renderChatMessages();

            try {
                // 真实接口请求（替换为实际后端地址）
                const response = await fetch("/moxiang/input", {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ input: message }),
                });


                const result = await response.text();
                const aiResponse = result || "抱歉，暂时无法为您提供解答";
                // 移除加载状态，添加AI回复
                chatMessages.pop();
                chatMessages.push({
                    sender: "ai",
                    content: aiResponse,
                    isTyping: false,
                });
                renderChatMessages();
            } catch (error) {
                console.error("请求失败：", error);
                // 移除加载状态，添加错误提示
                chatMessages.pop();
                chatMessages.push({
                    sender: "ai",
                    content: "网络异常，请稍后重试",
                    isTyping: false,
                });
                renderChatMessages();
            }
        }


        // 快捷按钮
        const quickButtons = document.querySelectorAll(".quick-question-btn");
        quickButtons.forEach((btn) => {
            btn.addEventListener("click", () => {
                quickQuestion(btn.textContent.trim());
            });
        });

        // 重置按钮
        const resetBtn = document.getElementById("resetChatBtn");
        resetBtn.addEventListener("click", resetChat);
    });
</script>
</body>
</html>